<template>
  <!-- 页面整体布局容器 -->
  <div class="common-layout">
    <!-- Element Plus 布局容器 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header class="flex">
        <!-- 系统Logo标题 -->
        <div class="logo">人脸识别管理系统</div>
        <!-- 导航菜单 -->
        <el-menu
            :default-active="$route.path"
            background-color="#2C3E50"
            active-text-color="white"
            class="el-menu-demo"
            mode="horizontal"
            :ellipsis="false"
            router
        >
          <!-- 人脸注册菜单项 -->
          <el-menu-item class="item" index="/face/recognize">人脸注册</el-menu-item>
          <!-- 人脸识别菜单项 -->
          <el-menu-item class="item" index="/face/register">人脸识别</el-menu-item>
          <!-- 获取图片菜单项 -->
          <el-menu-item class="item" index="/face/obtain">获取图片</el-menu-item>
        </el-menu>
      </el-header>
      <!-- 主要内容区域 -->
      <el-main class="main">
        <!-- 路由视图渲染区 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
// 引入路由相关函数
import { useRoute } from 'vue-router'
// 获取当前路由信息
const $route = useRoute()
</script>

<style scoped lang="scss">
/* 整体布局样式 */
.common-layout {
  width: 100%;
  height: 100%;
}

/* Logo样式 */
.logo {
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  color: white;
}

/* 头部弹性布局样式 */
.flex {
  display: flex;
  justify-content: space-between;
  background-color: #2C3E50;
  padding: 0 20px;
}

/* 菜单栏样式 */
.el-menu-demo {
  display: flex;
  justify-content: space-evenly;
}

/* 菜单项样式 */
.item {
  font-size: 18px;
  border: 3px solid #3498DB;

  color: white;
  margin: 0 10px;
  border-radius: 20px;
}

/* 主体内容区域样式 */
.main {
  border: 2px solid #DCDFE6;
  width: 1200px;
  height: 800px;
  padding: 0;
}

/* 深度选择器：设置激活状态菜单项的样式 */
:deep(.el-menu--horizontal .el-menu-item.is-active) {
  background-color: #2980b9 !important;
  border: 2px solid #2980b9 !important;
  color: white !important;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
</style>